<template>
	<cover-view class="custom-tabbar">
	    <cover-view class="custom-tabbar-border"></cover-view>
	    <cover-view v-for="(item,index) in list" :key="index" class="custom-tabbar-item" @click="switchTab(index)">
	      <cover-image :src="selectedIndex === index ? item.selectedIconPath : item.iconPath"></cover-image>
	      <cover-view :class="{'custom-tabbar-item-selected': selectedIndex==index}">{{item.text}}</cover-view>
	      <cover-view class="custom-tabbar-button-wrap">
	        <auth-button v-if="item.auth && !hasUserInfo" button-class="custom-tabbar-button" @userinfo="onUserInfo" width="100%" height="100%" cover></auth-button>
	      </cover-view>
	      
	    </cover-view>
	  </cover-view>
</template>

<script>
	import AuthButton from '@/components/authButton.vue'
	import {SETTINGS} from '@/utils/const.js'
	import {mapGetters} from 'vuex'
	import {reportEvent} from '@/services/miniApi.js'
	export default {
		name: 'customTabbar',
		components: {
			AuthButton
		},
		props: {
			selectedIndex: {
				type: Number,
				default(){
					return 0
				}
			}
		},
		data(){
			return {
				targetSelectIndex: -1,
				color: '#7A7E83',
				selectedColor: '#3cc51f',
				list: [
					{
						"pagePath": "/pages/index/index",
						"text": "地图导航",
						"iconPath": "../static/tabbar/map_unselect.png",
						"selectedIconPath": "../static/tabbar/map_select.png",
						"auth": false
					},
				
					{
						"pagePath": "/pages/ticket/ticket",
						"text": "在线领票",
						"iconPath": "../static/tabbar/ticket_unselect.png",
						"selectedIconPath": "../static/tabbar/ticket_select.png"
					},
					{
						"pagePath": "/pages/punch/punch",
						"text": "骁龙寻宝",
						"iconPath": "../static/tabbar/punch_unselect.png",
						"selectedIconPath": "../static/tabbar/punch_select.png"
					}, 
					{
						"pagePath": "/pages/exchange/exchange",
						"text": "兑换宝藏",
						"iconPath": "../static/tabbar/exchange_unselect.png",
						"selectedIconPath": "../static/tabbar/exchange_select.png",
						"auth": false
					}
				]
			}
		},
		computed: {
			...mapGetters(['hasUserInfo'])
		},
		methods: {
			onUserInfo(){
				if(this.targetSelectIndex >= 0){
					this._switchTab(this.list[this.targetSelectIndex], this.targetSelectIndex)
				}
			},
			_switchTab(item, index){
				if(index === 2){
					wx.navigateTo({
						url: "/pages/webview/webview?url="+encodeURIComponent(SETTINGS.PUNCH_URL+'?openId='+this.$store.state.user.openId)
					})
					reportEvent('tabbar_seeking')
					return
				}
				wx.switchTab({
					url: item.pagePath
				})
			},
			switchTab(index){
				const item = this.list[index]
				//当前tab不需要授权或者已经授权过
				if(!item.auth || this.hasUserInfo){
					this._switchTab(item, index)
					return
				}
				
				//当需要授权，并且还没授权过得，因为有auth-button，所以会先点到它从而触发授权
				this.targetSelectIndex = index
			}
		},
		onLoad(){
			console.log('store', this.$store)
		}
	}
</script>

<style lang='scss'>
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	/* background: #0C2742; */
	background: white;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom);

}

.custom-tabbar-border {
	background-color: rgba(0,0,0,0);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	transform: scaleY(0.5);
}

.custom-tabbar-item {
	position: relative;
	flex: 1;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #A3BAD8;
}

.custom-tabbar-item-selected{
	color: #DC143C;
}

.custom-tabbar-item cover-image {
	width: 78rpx;
	height: 78rpx;
	margin-bottom: 5rpx;
}

.custom-tabbar-item cover-view {
	font-size: 24rpx;
}

.custom-tabbar-item .custom-tabbar-button-wrap{
	position: absolute;
	width: 100%;
	height: 100%;
}

.tab-bar-item .tab-bar-button-wrap .tab-bar-button{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	border-radius: 0;
}
.tab-bar-item .tab-bar-button-wrap .tab-bar-button .wx-button-cover-view-wrapper{
	width: 100%;
	height: 100%;
}
</style>